<template>
    <div class="detail">
        <div class="content">
            <p class="date-china">农历{{ traditionDay }}</p>
            <p class="date-festival">{{festival}} {{ animalYear }} </p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Detail',
    data () {
        return {
            traditionDay: "",
            festival: "",
            animalYear: ""
        }
    },
    methods: {
        changeDetail (item) {
            console.log(item)
            this.traditionDay = item.traditionDay;
            this.festival = item.festival ? item.festival + " | " : "";
            this.animalYear = item.animalYear + '年';
        }
    }
}
</script>

<style lang="stylus" scoped>
    .detail
        width 95%
        height 1.7rem
        margin-top .3rem
        border-radius .3rem
        background white
        display flex
        align-items center
        justify-content center
        .content
            width 85%
            height 1.1rem
            display flex
            flex-direction column
            justify-content space-between
            align-items flex-start
            .date-china
                font-size .43rem
                color #333
            .date-festival
                font-size .36rem
                color gray
</style>


